<template>
  <div v-if="hasMore || isLoadingMore" class="w-full flex justify-center py-8">
    <button 
      @click="handleLoadMore"
      :disabled="isLoadingMore || !hasMore"
      class="h-10 px-5 rounded-xl ring-1 ring-gray-200 bg-white text-gray-700 inline-flex items-center gap-2 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      <svg 
        v-if="isLoadingMore"
        xmlns="http://www.w3.org/2000/svg" 
        class="h-4 w-4 animate-spin text-[#635BFF]" 
        viewBox="0 0 24 24" 
        fill="currentColor"
      >
        <path d="M12 2a10 10 0 00-10 10h2a8 8 0 118 8v2a10 10 0 000-20z"/>
      </svg>
      <svg 
        v-else
        xmlns="http://www.w3.org/2000/svg" 
        class="h-4 w-4 text-[#635BFF]" 
        viewBox="0 0 24 24" 
        fill="none" 
        stroke="currentColor" 
        stroke-width="2"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
      </svg>
      {{ isLoadingMore ? '加载中...' : '加载更多' }}
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  hasMore: boolean
  isLoadingMore: boolean
  onLoadMore: () => void
}

const props = defineProps<Props>()

const handleLoadMore = () => {
  if (!props.isLoadingMore && props.hasMore) {
    props.onLoadMore()
  }
}
</script>


